<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文本框默认文字点击消失的效果</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#focus .input_txt").each(function(){
     var thisVal=$(this).val();
     //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
     if(thisVal!=""){
       $(this).siblings("#focus label").hide();
      }else{
       $(this).siblings("#focus label").show();
      }
     //聚焦型输入框验证
     $(this).focus(function(){
       $(this).siblings("#focus label").hide();
      }).blur(function(){
        var val=$(this).val();
        if(val!=""){
         $(this).siblings("#focus label").hide();
        }else{
         $(this).siblings("#focus label").show();
        }
      });
    })
    $("#keydown .input_txt").each(function(){
     var thisVal=$(this).val();
     //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
     if(thisVal!=""){
       $(this).siblings("#keydown label").hide();
      }else{
       $(this).siblings("#keydown label").show();
      }
      $(this).keyup(function(){
       var val=$(this).val();
       $(this).siblings("#keydown label").hide();
      }).blur(function(){
        var val=$(this).val();
        if(val!=""){
         $(this).siblings("#keydown label").hide();
        }else{
         $(this).siblings("#keydown label").show();
        }
       })
     })
  })
</script>
<style type="text/css">
form { 
	width:400px; 
	margin:10px auto;
	border:solid 1px #E0DEDE;
	background:#FCF9EF; 
	padding:20px;
	box-shadow:0 1px 10px rgba(0, 0, 0, 0.1)
	inset;font-family:Arial;
}
.tonjay { 
	display:block;
	height:40px;
	position:relative; 
	margin:20px 0; 
}
#focus label,#keydown label { 
	position:absolute; 
	line-height:40px; 
	left:10px; 
	top:0;
	color:#ccc; 
	cursor:text;
	background:none;
}
.input_txt {
	width:398px; 
	border:solid 1px #ccc; 
	box-shadow:0 1px 10px rgba(0, 0, 0, 0.1) inset;
	height:38px; 
	line-height:38px; 
	padding-left:10px;
}
.input_txt:focus {
	box-shadow:0 0 4px rgba(255, 153, 164, 0.8);
	border:solid 1px #B00000;
}
.border_radius {
	border-radius:5px; 
	color:#B00000;
}
h2 { 
	font-family:"微软雅黑"; 
	text-shadow:1px 1px 3px #fff;
	padding:0;
	margin:0;
}
</style>
</head>
<body>
<form class="border_radius" id="focus">
  <h2>聚焦型提示语消失</h2>
  <div class="tonjay">
    <input type="text" class="input_txt border_radius" id="Input"  /><label for="Input">js特效大全网注册 </label>
  </div>
  <div class="tonjay">
    <input type="text" class="input_txt border_radius" id="Input2" /><label for="Input2">输入用户名</label>
  </div>
</form>
<form class="border_radius" id="keydown">
  <h2>输入型提示语消失</h2>
  <div class="tonjay">
    <input type="text" class="input_txt border_radius" id="Input3" /><label for="Input3">js特效大全网注册 </label>
  </div>
  <div class="tonjay">
    <input type="text" class="input_txt border_radius" id="Input4"/><label for="Input4">输入用户名</label>
  </div>
</form>
</body>
</html>